<template>
  <qc-page-table
    ref="appActionPageTableRef"
    :columns="columns"
    :loadData="loadData"
    :rowKey="(record) => record[primaryKey]"
  >
    <template #toolbarTitle>
      {{ t("org.app-action.appActionTableTitle") }}
    </template>
    <template #toolbarButton>
      <a-button
        type="dashed"
        v-if="parentId"
        @click="initModelControllerAction"
      >
        <template #icon>
          <qc-icon style="font-size: 16px" type="icon-cloud-sync"> </qc-icon>
        </template>
        {{ t("org.app-action.initBtn") }}
      </a-button>
      <qc-add-button @click="addButtonClick"></qc-add-button>
      <qc-delete-button @click="deleteButtonClick"></qc-delete-button>
    </template>
    <template #customActionName="{ text, record }">
      <span class="qc-link" @click="editButtonClick(record)">
        {{ text }}
      </span>
    </template>
    <template #customActionType="{ text, record }">
      <a-tag :color="text == 'Controller' ? '#87d068' : '#f50'">
        {{ record.actionTypeDesc }}
      </a-tag>
    </template>
  </qc-page-table>
  <a-modal
    v-if="showModal"
    v-model:visible="showModal"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> {{ modalTitle }} </template>
    <org-app-action-from
      ref="appActionFormRef"
      :actionId="currentAppActionId"
      :actionType="currentAppActionType"
      :parentId="currentParentActoinId"
      @submit-success="submitSuccess"
    ></org-app-action-from>
  </a-modal>
</template>
<script lang='ts'>
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import appActionApi from "/@/api/org/app-action";
import { useModelPageTable } from "/@/kit/model-kit";
import {
  appActionTableColumns,
  AppActionTypeDic_C,
  AppActionTypeDic_F,
  appActionEditPageUrl,
} from "../interface";
import OrgAppActionFrom from "./app-action-form.vue";

export default defineComponent({
  name: "OrgAppActionList",
  props: {
    queryParam: {
      //查询参数
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
    OrgAppActionFrom,
  },
  setup(props) {
    const { t } = useI18n();
    const router = useRouter();
    const appActionPageTableRef = ref();
    const appActionFormRef = ref();
    const {
      primaryKey,
      loadData,
      searchTable,
      reloadTable,
      deleteSelectData,
    } = useModelPageTable(
      appActionPageTableRef,
      appActionApi,
      props.queryParam
    );

    const queryParentId = props.queryParam?.parentId;
    const appActionState = reactive({
      //表格字段
      columns: appActionTableColumns,
      primaryKey,
      loadData,
      onTableSearch: () => reloadTable(),
      addButtonClick: () => {
        appActionState.modalTitle = t("org.app-action.addAppActionTitle");
        if (queryParentId) {
          appActionState.currentAppActionType = AppActionTypeDic_F;
          appActionState.currentParentActoinId = queryParentId;
        } else {
          appActionState.currentAppActionType = AppActionTypeDic_C;
        }
        appActionState.showModal = true;
      },
      editButtonClick: (item: any) => {
        //判断其类型 如果为类则进行页面跳转 接口则进行弹窗
        if (item.actionType == AppActionTypeDic_C) {
          router.push({ path: appActionEditPageUrl + item[primaryKey] });
        } else {
          appActionState.modalTitle = t("org.app-action.editAppActionTitle");
          appActionState.currentAppActionId = item[primaryKey];
          appActionState.currentAppActionType = null;
          appActionState.showModal = true;
        }
      },
      deleteButtonClick: () => deleteSelectData(),
      //弹窗部分
      showModal: false,
      modalTitle: null,
      currentAppActionId: null, //在编辑的时候会用到当前的actionId
      currentAppActionType: null, //接口类型
      currentParentActoinId: null, //父亲接口id
      handleOk: () => appActionFormRef.value.onSubmit(),
      handleCancel: () => appActionState.removeModalProps(),
      submitSuccess: () => {
        appActionState.showModal = false;
        appActionState.removeModalProps();
        reloadTable();
      },
      removeModalProps: () => {
        appActionState.currentAppActionId = null;
        appActionState.currentAppActionType = null;
        appActionState.currentParentActoinId = null;
      },
      initModelControllerAction: () => {
        appActionApi.initModelControllerAction(queryParentId).then(() => {
          reloadTable();
        });
      },
    });
    onMounted(() => searchTable());
    return {
      t,
      appActionPageTableRef,
      appActionFormRef,
      parentId: queryParentId,
      ...toRefs(appActionState),
    };
  },
});
</script>
<style lang='less' scoped>
</style>